.ProductVariantsImages {

  .productVariantImages {
    > header {
      padding: 10px;
      background: var(--mall-store-background-color);
      margin-bottom: 8px;
    }

    > section {
      display: flex;
      flex-wrap: wrap;
    }
  }


  .productImage {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: 1px solid var(--mall-store-border-color);
    border-radius: 4px;
    height: 6em;
    width: 6em;
    text-align: center;
    cursor: pointer;
    line-height: 1.8em;
    margin-right: 8px;
    margin-bottom: 8px;
    position: relative;
    user-select: none;

    .emptyDescription {
      font-size: 0.8em;
      user-select: none;
    }

    .productImageActions {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      background: linear-gradient(180deg, rgba(33, 43, 54, .55), hsla(0, 0%, 100%, 0));
      opacity: 0;

      &:focus, &:hover {
        transition: opacity .1s cubic-bezier(0, 0, .42, 1);
        opacity: 1;
      }

      :global {
        .anticon-delete {
          cursor: pointer;
          display: initial;
          position: absolute;
          top: 6px;
          right: 6px;
          color: hsla(0, 0%, 100%, .9);
        }
      }

    }

    :global {

      img {
        height: 100%;
        width: 100%;
        border-radius: 4px;
      }

      input[type="file"] {
        display: none;
      }

      .anticon-camera {
        font-size: 1.4em;
      }
    }
  }

}
